<template>
    <div class="container" style="height: 100%;padding: 30px !important;">
        <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4" :span="4" v-for="(item,index) in list" style="margin-bottom: 20px;" :key="index" v-if="index>0">
                <div class="grid-content bg-purple item-box" :style="'background-color:'+item.bgColor" @click="toPath(index)">
                    <img :src="item.pathIcon" alt="" style="vertical-align: middle;">
                    <span class="card-txt">{{item.title}}</span>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "home",
        data(){
            return {
                list:[
                    // {pathIcon:require('../../../assets/img/homeIcon/timing.png'),title:'实时监控',bgColor:'#7ad9ce'},
                    // {pathIcon:require('../../../assets/img/homeIcon/statistics.png'),title:'统计分析',bgColor:'#fec864'},
                    // {pathIcon:require('../../../assets/img/homeIcon/equipment.png'),title:'设备管理',bgColor:'#4d68a0'},
                    // {pathIcon:require('../../../assets/img/homeIcon/region.png'),title:'区域管理',bgColor:'#63b4f4'},
                    // {pathIcon:require('../../../assets/img/homeIcon/energy.png'),title:'能源策略',bgColor:'#5da2ae'},
                    // {pathIcon:require('../../../assets/img/homeIcon/plan.png'),title:'预备管理',bgColor:'#ae5d83'},
                    // {pathIcon:require('../../../assets/img/homeIcon/sms.png'),title:'短信管理',bgColor:'#8f82bc'},
                    // {pathIcon:require('../../../assets/img/homeIcon/system.png'),title:'系统设置',bgColor:'#5dae89'},
                ]
            }
        },
        created(){

            var itmeMenu =  JSON.parse(localStorage.getItem('menu_item'));
            var demostr= [] ;

            for(var i=0;i<itmeMenu.length;i++){
                demostr[i] = itmeMenu[i];
                demostr[i].pathIcon = itmeMenu[i].pathIcon?require('../../../assets/img/homeIcon/'+ itmeMenu[i].pathIcon):'';

            }
            itmeMenu.find(function (currentValue) {
                if(currentValue.subs){
                    currentValue.subs.find(function (cValue) {
                        if(cValue.remark&&cValue.remark==1&&cValue.id!='3002'){
                            var demoObj = cValue;
                            demoObj['pathIcon'] = cValue.pathIcon?require('../../../assets/img/homeIcon/'+ cValue.pathIcon):'';
                            demostr.push(demoObj)
                        }
                    })
                }
            })
           this.list = demostr;
        },
        methods:{
            toPath(p){
                if(p){
                    if(this.list[p].subs){//判断是否有子菜单
                        if(this.list[p].id == '3000'&&this.list[p].subs&&this.list[p].subs.length>0){//判断当前菜单是否是设备管理，如果是设备管理则调到设备管理页面
                            for(var i=0;i<this.list[p].subs.length;i<i++){
                                if(this.list[p].subs[i].id=='3002'){
                                    this.$router.push(this.list[p].subs[i].index);
                                    return ;
                                }
                            }
                            this.$router.push(this.list[p].subs[0].index);
                        }else{
                            this.$router.push(this.list[p].subs[0].index);
                        }
                    }else{
                        this.$router.push(this.list[p].index);
                    }

                }

            }
        }
    }
</script>

<style scoped>
    /deep/ .el-card__body{
        padding: 0;
    }
    .item-box{
        text-align: center;
        padding: 20% 0;
    }
    .card-txt{
        position: relative;
        top: 2px;
        /*left: 0;*/
        padding: 0 5%;
        color: #fff;
        /* font-family: 'microsoft yahei'; */
        /*font-weight: 600;*/
        /*font-size: 15px;*/
    }
</style>
